import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      downLoading: false,
    };
  },
  methods: {
    downloadSingleFile(path) {
      FileSaver.saveAs(path); // 利用file-saver保存文件  自定义文件名
    },
    // 点击下载
    download(name, fileList) {
      this.downLoading = true;
      var blogTitle = `${name}`; // 下载后压缩包的命名
      var zip = new JSZip();
      var promises = [];
      let cache = {};

      const updateCallback = (metadata) => {
        // metadata.percent是下载进度百分比
        // console.log(`Progress: ${metadata.percent}%`);
        // 在这里更新用户界面显示下载进度
      };

      for (let item of fileList) {
        // item.path为文件链接地址
        const promise = this.getImgArrayBuffer(item.path).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(item.name, data, { binary: true }); // 逐个添加文件
          cache[item.name] = data;
        });
        promises.push(promise);
      }
      Promise.all(promises)
        .then(() => {
          zip
            .generateAsync({ type: "blob" }, updateCallback)
            .then((content) => {
              // 生成二进制流
              FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  自定义文件名
              this.downLoading = false;
            });
        })
        .catch((res) => {
          this.this.downLoading = false;
          alert("文件压缩失败");
        });
    },
    //文件以流的形式获取（参数url为文件链接地址）
    getImgArrayBuffer(url) {
      const updateCallback = (progressEvent) => {
        if (progressEvent.lengthComputable) {
          const percent = (progressEvent.loaded / progressEvent.total) * 100;
          console.log(`File download progress: ${percent}%`);
          // 在这里可以更新用户界面，例如更新进度条或显示下载百分比
        }
      };

      return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.onprogress = updateCallback;
        xhr.onload = function () {
          if (this.status == 200) {
            resolve(this.response);
          } else {
            reject(this.status);
          }
        };
        xhr.send();
      });
    },
  },
};
